<template>
	<view style="padding: 20rpx;">
		<uni-forms :label-width="77" label-position="top">
			<uni-forms-item label="签到照片">
				<uni-file-picker v-model:value="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg"
					:limit="mainModel.photoCount" :auto-upload="false" @select="select" @delete="handleDelete" :sourceType="['camera']" />
			</uni-forms-item>
		</uni-forms>
		<view class="btn" @click="handleClock">
			提交
		</view>

		<ShowModal v-model="showOpen" title="" :mData="modalData" type="customBtn" @onConfirm="onConfirm"
			:showCancel="false" :maskEnable="false">
			<view>
				<uni-forms :modelValue="valiFormData" ref="uForm" :rules="rules">
					<uni-forms-item label="原因" name="remark" required>
						<uni-easyinput type="textarea" v-model="valiFormData.remark"
							placeholder="请填写原因"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
		</ShowModal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import ShowModal from "../../pages/show-modal/index.vue"
	import {
		getAction,
		postAction,
		postFormAction,
		fileAction
	} from "@/utils/request.js";
	const imageValue = ref([])
	const location = ref({})
	const punchPage = ref({})
	const showOpen = ref(false)
	const punchId = ref(-1)
	const modalData = ref({
		title: "",
		confirmText: "确定",
	})
	const valiFormData = ref({
		remark: "",
	})
	const rules = {
		remark: {
			rules: [{
				required: true,
				errorMessage: '原因不能为空'
			}]
		}
	}
	const fileList = ref([])
	const mainModel = ref({})

	onLoad((options) => {
		mainModel.value = JSON.parse(options.record)
		fileList.value = []
	})

	// 获取上传状态
	function select(e) {
		console.log('select：', e)
		fileList.value = fileList.value.concat(e.tempFiles)
		console.log('fileList.value', fileList.value)
	}
	//删除
	function handleDelete(e) {
		console.log('handleDelete：', e)
		fileList.value = fileList.value.filter(item => item.path != e.tempFile.path)
		console.log('fileList.value', fileList.value)
	}

	function handleClock() {
		const params = {
			...mainModel.value,
		}
		const files = fileList.value.map((item,index) => {
			return {
				uri: item.url,
				file: item,
				name: `file${index+1}`,
			}
		})
		if (files.length < mainModel.value.photoCount) {
			uni.showToast({
				title: '须拍' + mainModel.value.photoCount + '张照片',
				icon: 'none'
			});
			return;
		}
		
		uni.showModal({
			title: '确定打卡吗？',
			success: async (e) => {
				if (e.confirm) {
					try {
						console.log('params', params);
						const res = await fileAction('/m/hr/punch', params, 'post', files);
						console.log('res', res);
						if (res.code == 500) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							let result = res.data.result;
							punchId.value = res.data.id;

							if (result != 0) {
								handleShowOpen();
							} else {
								uni.showModal({
									title: '提示',
									content: '打卡成功',
									success: function(suc) {
										if (suc.confirm) {
											callBack()
										} else if (suc.cancel) {
											callBack()
										}
									}
								});
							}
							// uni.showToast({
							// 	title: '已打卡',
							// 	icon: 'none'
							// })
						}
					} catch (error) {
						console.log("error", error)
					}
				}
			}
		})
	}
	const uForm = ref(null)
	//打开modal
	function handleShowOpen() {
		valiFormData.value.remark = undefined;
		modalData.value.title = '提示';
		showOpen.value = true;
		uForm.value.clearValidate()
	}
	//modal回调
	function onConfirm() {
		uForm.value.validate().then(res => {
			console.log("valiFormData", valiFormData.value, res)
			uni.showLoading({
				title: '加载中'
			});
			const params = {
				id: punchId.value,
				remark: valiFormData.value.remark,
			}
			console.log('params', params);
			postFormAction('/m/hr/punchRemark', params).then((
					res) => {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '操作成功',
						success: function(suc) {
							if (suc.confirm) {
								callBack()
							} else if (suc.cancel) {
								callBack()
							}
						}
					});
				})
				.catch((e) => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: e.message,
					});
				});
			showOpen.value = false;
		}).catch(err => {
			console.log('err', err);
		})
	}
	/*返回上一页*/
	function callBack() {
		uni.navigateBack();
	}
</script>

<style scoped>
	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		background: #4b7aff;
		border-radius: 12rpx;
		margin-top: 90rpx;
		opacity: 0.9;
		z-index: 1000;
	}
</style>